{% extends "base.html" %}

{% block title %}关于我 - 个人博客{% endblock %}

{% block content %}
<div class="about-page">
    <div class="about-header">
        <div class="about-avatar">
            {% if author and author.avatar %}
            <img src="{{ author.avatar }}" alt="{{ author.name or author.username }}" class="avatar-img">
            {% else %}
            <div class="avatar-placeholder">
                <svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
            </div>
            {% endif %}
        </div>
        <h1 class="about-name">{{ author.name or author.username or "博主" }}</h1>
        <p class="about-title">个人博客作者</p>
        {% if author and author.bio %}
        <p class="about-bio">{{ author.bio }}</p>
        {% endif %}
    </div>
    
    <div class="about-content">
        <div class="about-section">
            <h2>关于这个博客</h2>
            <p>欢迎来到我的个人博客！这里是我分享技术心得、生活感悟和学习笔记的地方。</p>
            <p>我热爱编程，喜欢探索新技术，也享受在代码中解决问题的过程。通过这个博客，我希望能够：</p>
            <ul>
                <li>记录学习过程中的思考和总结</li>
                <li>分享实用的技术经验和技巧</li>
                <li>与同行交流技术观点和见解</li>
                <li>建立自己的知识体系和思维框架</li>
            </ul>
        </div>
        
        <div class="about-section">
            <h2>技术栈</h2>
            <div class="tech-stack">
                <div class="tech-item">
                    <h3>后端开发</h3>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">Flask</span>
                        <span class="tech-tag">Django</span>
                        <span class="tech-tag">FastAPI</span>
                        <span class="tech-tag">SQLAlchemy</span>
                    </div>
                </div>
                <div class="tech-item">
                    <h3>前端开发</h3>
                    <div class="tech-tags">
                        <span class="tech-tag">JavaScript</span>
                        <span class="tech-tag">Vue.js</span>
                        <span class="tech-tag">React</span>
                        <span class="tech-tag">HTML5</span>
                        <span class="tech-tag">CSS3</span>
                    </div>
                </div>
                <div class="tech-item">
                    <h3>数据库</h3>
                    <div class="tech-tags">
                        <span class="tech-tag">MySQL</span>
                        <span class="tech-tag">PostgreSQL</span>
                        <span class="tech-tag">Redis</span>
                        <span class="tech-tag">MongoDB</span>
                    </div>
                </div>
                <div class="tech-item">
                    <h3>工具与平台</h3>
                    <div class="tech-tags">
                        <span class="tech-tag">Docker</span>
                        <span class="tech-tag">Git</span>
                        <span class="tech-tag">Linux</span>
                        <span class="tech-tag">AWS</span>
                        <span class="tech-tag">Nginx</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="about-section">
            <h2>联系方式</h2>
            <div class="contact-info">
                {% if author and author.email %}
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                    <a href="mailto:{{ author.email }}">{{ author.email }}</a>
                </div>
                {% endif %}
                
                {% if author and author.website %}
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                    <a href="{{ author.website }}" target="_blank" rel="noopener">个人网站</a>
                </div>
                {% endif %}
                
                {% if author and author.github %}
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    <a href="{{ author.github }}" target="_blank" rel="noopener">GitHub</a>
                </div>
                {% endif %}
                
                {% if author and author.twitter %}
                <div class="contact-item">
                    <svg class="contact-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                    </svg>
                    <a href="{{ author.twitter }}" target="_blank" rel="noopener">Twitter</a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="about-section">
            <h2>博客统计</h2>
            <div class="blog-stats">
                <div class="stat-item">
                    <div class="stat-number">{{ stats.total_posts if stats else 0 }}</div>
                    <div class="stat-label">文章总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ stats.total_views if stats else 0 }}</div>
                    <div class="stat-label">总浏览量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ stats.total_comments if stats else 0 }}</div>
                    <div class="stat-label">评论总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ stats.total_tags if stats else 0 }}</div>
                    <div class="stat-label">标签数量</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 关于页面样式 */
.about-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

.about-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2.5rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.about-avatar {
    margin-bottom: 1.25rem;
}

.avatar-img {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: block;
}

.avatar-placeholder {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #9ca3af;
}

.about-name {
    font-size: 1.875rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
}

.about-title {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.about-bio {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.625;
    max-width: 32rem;
    margin: 0 auto;
}

.about-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
}

.about-section {
    margin-bottom: 2.5rem;
}

.about-section:last-child {
    margin-bottom: 0;
}

.about-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #3b82f6;
}

.about-section p {
    color: #4b5563;
    line-height: 1.625;
    margin-bottom: 1rem;
}

.about-section ul {
    color: #4b5563;
    line-height: 1.625;
    padding-left: 1.25rem;
}

.about-section li {
    margin-bottom: 0.5rem;
}

.tech-stack {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.tech-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 1rem;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag {
    background: #f3f4f6;
    color: #4b5563;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s;
}

.tech-tag:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-2px);
}

.contact-info {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.contact-item:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

.contact-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.contact-item a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #3b82f6;
}

.blog-stats {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat-item {
    text-align: center;
    padding: 1.25rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.stat-item:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

.stat-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

@media (max-width: 768px) {
    .about-page {
        padding: 1.25rem 1rem;
    }
    
    .about-header {
        padding: 2rem;
    }
    
    .about-content {
        padding: 1.5rem;
    }
    
    .about-name {
        font-size: 1.5rem;
    }
    
    .tech-stack {
        grid-template-columns: 1fr;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .blog-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>
{% endblock %}
